<template>
  <div>
    <van-popup
      v-model="show"
      position="bottom"
      @close="handlerClose();"
    >
      <div style="font-size: 16px;font-weight: 500;text-align: center;margin-top: 15px;">请选择金额充值，使用微信支付</div>
      <div style="color: #f44;margin-top: 15px;margin-bottom: 15px;margin-left: 15px;">当前余额：{{amount | regexMoney}}</div>
      <van-grid :column-num="2" style="color: #07c160;font-size: 16px;">
        <van-grid-item v-for="item in recharges" @click="wxPayJSAPI(item)">
          {{item | regexMoney}}元
        </van-grid-item>
      </van-grid>

    </van-popup>
  </div>
</template>

<script>
  import userPayService from '../../api/userPayService';
  import util from '../../../../../static/mobile/js/util';
  import {Toast,Dialog} from 'vant';

  export default {
  name: 'reCharge',
  props: {
    amount:[String, Number],
    goodsId:[String,Number]
  },
  data() {
    return {
      show:true,
      recharges:[5,10,20,30,50,100],
    };
  },
  methods: {
    handlerClose() {
      this.$emit('close');
    },
    wxPayJSAPI(amount) {
      if(util.is_weixn()) {
        Toast.loading({
          mask: true,
          message: '加载中...'
        });
        userPayService.wxPayJSAPI({amount:amount}).then((rsp)=>{
          Toast.clear();
          var that = this;
          if(rsp.result) {
            var attr = rsp.obj;
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest', {
                "appId":attr.appId,     //公众号名称，由商户传入
                "timeStamp":attr.timeStamp,         //时间戳，自1970年以来的秒数
                "nonceStr":attr.nonceStr, //随机串
                "package":attr.package,
                "signType":"MD5",         //微信签名方式：
                "paySign":attr.paySign //微信签名
              },
              function(res){
                if(res.err_msg == "get_brand_wcpay_request:ok" ){
                  that.show = false;
                  if(that.goodsId) {
                    Dialog.confirm({
                      message: '闯关赢商品',
                      confirmButtonText:'开始闯关',
                      showCancelButton:false
                    }).then(() => {
                      that.$nocacheRouter('/game?goodsId='+that.goodsId);
                    }).catch(() => {
                      that.$nocacheRouter('/game?goodsId='+that.goodsId);
                    });

                  } else {
                    that.$toast('充值成功，请到个人中心查看！');
                    //刷新个人中心页面
                    that.$nocacheRouter('/user');
                  }


                }
              });
            }else {
              this.$toast(rsp.errorMsg);
            }

      }).catch((error)=>{
              this.$toast('wxPayJSAPI接口异常'+error);
          });

      }else {
        this.$toast('请使用微信客户端登录后支付');
      }

    }
  }
};
</script>
